<!--
 * @Description:
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-04-20 17:19:38
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-08-30 11:35:03
-->
<template>
    <div class="tmap-container">
        <div id="mapDiv"></div>
    </div>
</template>

<script>
/* eslint-disable no-unused-vars */
import T from "T";
import data from "@/components/Tmap/tsg_tianditu.json";
// import data1 from "@/components/Tmap/xg.json";
import { color } from "echarts";
// console.log(data1)
export default {
    name: "Map",
    props: {
        zoom_level: {
            // 默认缩放等级
            type: [Number, String],
            default: 10,
        },
        maptype: {
            type: Number,
            default: 0,
        },
        theme_style: {
            type: String,
            default: "default",
        },
        location: {
            type: Object,
            default() {
                return {};
            },
        },
        diyMarker: {
            // 自定义覆盖层
            type: Boolean,
            default: false,
        },
        ShowZoom: {
            // 双击放大地图
            type: Boolean,
            default: false,
        },
        ZoomCtrlPos: {
            type: String,
            default: "RIGHT_TOP",
        },
        // 边界线-颜色
        stroke: {
            type: [String, Number],
            default: "blue",
        },
        // 边界线-宽度
        strokeWidth: {
            type: [String, Number],
            default: 1,
        },
        // 边界线--透明度
        strokeOpacity: {
            type: [String, Number],
            default: 0.5,
        },
        // 地图区域填充颜色
        fillColor: {
            type: [String, Number],
            default: "#CCF3FF",
        },
        // 地图区域填充颜色 透明度
        fillOpacity: {
            type: [String, Number],
            default: 0.1,
        },
        polygonsData: {
            type: Array,
            default() {
                return [];
            },
        },
        MarkerData: {
            type: Array,
            default() {
                return [];
            },
        },
        has_detail: {
            type: Boolean,
            default: true,
        },
        is_obj: {
            // 点击地图上 icon,, 返回id 或者 对象
            type: Boolean,
            default: false,
        },
        effect_property: {
            // 涟漪动画的配置项
            type: Object,
            default: () => {
                return {
                    color: "#2EF7FC", // 中心点颜色
                    iconSize: [10, 10], // [宽, 高]
                    speedTime: 2,
                    level: 8,
                    diveColor: "#3ff",
                };
            },
        },
        effect_list: {
            // 涟漪动画 点列表
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            map: null,
            lay: null,
            overLay_obj: null,
            ativePolygon: null,
            overlayData: [],
            overlays: [],
            label: null,
        };
    },
    watch: {
        // stroke: {
        //     handler(n, o) {
        //         this.$nextTick(() => {
        //             this.map.removeOverLay(this.overLay_obj);
        //             this.overLay_obj = new T.Polygon(data.polygons, {
        //                 color: this.stroke,
        //                 weight: this.strokeWidth,
        //                 opacity: this.strokeOpacity,
        //                 fillColor: this.fillColor,
        //                 fillOpacity: this.fillOpacity,
        //             });
        //             this.map.addOverLay(this.overLay_obj);
        //         });
        //     },
        //     deep: false,
        //     immediate: false,
        // },
        polygonsData: {
            handler(n, o) {
                this.overlayData = n;
                this.addOverlays();
            },
            deep: true,
        },
        MarkerData: {
            handler(n, o) {
                this.$nextTick(() => {
                    if (this.diyMarker) {
                        this.AddOverLayFn();
                    } else {
                        this.addMarkers();
                    }
                });
            },
            deep: true,
            immediate: true,
        },
        effect_list: {
            handler(n, o) {
                this.$nextTick(() => {
                    this.addEffect();
                });
            },
            deep: true,
            immediate: true,
        },
        maptype: {
            handler(n, o) {
                // this.initMapData(n);
            },
            deep: true,
            // immediate: true
        },
        location: {
            handler(n, o) {
                this.changeMaplocation();
            },
            deep: true,
        },
    },
    mounted() {
        this.loadmap();
        // this.addOverlays();
    },
    methods: {
        // 1切换地图类型
        initMapData(type) {
            let mapList = [
                {
                    title: "地图", //地图控件上所要显示的图层名称
                    layer: window.TMAP_NORMAL_MAP, //地图类型对象，即MapType。
                },
                {
                    title: "卫星",
                    layer: window.TMAP_SATELLITE_MAP,
                },
                {
                    title: "卫星混合",
                    layer: window.TMAP_HYBRID_MAP,
                },
                {
                    title: "地形",
                    layer: window.TMAP_TERRAIN_MAP,
                },
                {
                    title: "地形混合",
                    layer: window.TMAP_TERRAIN_HYBRID_MAP,
                },
            ];
            this.map.setMapType(mapList[type].layer);
        },
        // 2切换定位点
        changeMaplocation() {
            this.map.centerAndZoom(
                new T.LngLat(this.location.lng, this.location.lat),
                11
            );
        },
        // 3加载地图
        loadmap() {
            let that = this;
            // 3.1 链接
            const imageURL =
                "http://t0.tianditu.gov.cn/img_w/wmts?" +
                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=84912b9f9bf0b9a572f91aae859b63a3";
            // 3.2创建自定义图层对象
            this.lay = new T.TileLayer(imageURL, {
                minZoom: 12,
                maxZoom: 18,
            });

            // const config = { layers: [this.lay] }
            let map = new T.Map("mapDiv"); // 初始化地图对象
            this.map = map;
            this.initMapData(this.maptype);

            // 3.3设置显示地图的中心点和级别
            this.map.centerAndZoom(
                new T.LngLat(this.location.lng, this.location.lat),
                this.zoom_level
            );
            map.setMinZoom(10);
            map.setMaxZoom(18);

            if (this.theme_style == "indigo") {
                map.setStyle("indigo");
            } else if (this.theme_style == "black") {
                map.setStyle("black");
            } else if (this.theme_style == "default") {
                map.removeStyle();
            }
            // 3.4允许鼠标双击放大地图
            // map.enableScrollWheelZoom();
            if (this.ShowZoom) {
                let controlPosition = "";
                const control = new T.Control.Zoom();
                //添加缩放平移控件
                this.map.addControl(control);
                switch (this.ZoomCtrlPos) {
                    case "LEFT_TOP":
                        controlPosition = T_ANCHOR_TOP_LEFT;
                        break;
                    case "RIGHT_TOP":
                        controlPosition = T_ANCHOR_TOP_RIGHT;
                        break;
                    case "LEFT_BOTTOM":
                        controlPosition = T_ANCHOR_BOTTOM_LEFT;
                        break;
                    case "RIGHT_BOTTOM":
                        controlPosition = T_ANCHOR_BOTTOM_RIGHT;
                        break;
                }
                control.setPosition(controlPosition);
            }

            // 3.5创建地图图层对象
            // const ctrl = new T.Control.MapType({ mapTypes: this.mapTypeSelect }) // 初始化地图类型选择控件
            // this.map.addControl(ctrl) //添加地图选择控件

            // this.map.setMapType(this.mapList[this.maptype].layer) // 设置地图普通街道视图

            // 3.6铁山港行政区域
            this.overLay_obj = new T.Polyline(data.polygons, {
                color: this.stroke,
                weight: this.strokeWidth,
                opacity: this.strokeOpacity,
                fillColor: this.fillColor,
                fillOpacity: this.fillOpacity,
            });
            // let LayerGroup = new T.LayerGroup(this.overLay_obj)
            // let lay = map.addLayer(this.overLay_obj)
            // lay.setZIndex(-1)
            // map.addOverLay(lay);
            // 3.7地图自适应
            // this.map.setFitView();

            this.config = {
                showLabel: true,
                color: "blue",
                weight: 1,
                opacity: 0.5,
                fillColor: "#FFFFFF",
                fillOpacity: 0.5,
            };
            // 3.8 创建标注工具对象
            //   this.polygonTool = new T.PolygonTool(map,  this.config);

            // this.addMarkers();

            document.getElementsByClassName(
                "tdt-control-copyright tdt-control"
            )[0].style.display = "none";

            // 3.9 监听鼠标移入地图事件
            this.map.addEventListener("mouseover", function (e) {
                that.$emit("mouserover_map");
            });
            // 3.10 监听鼠标移出地图事件
            this.map.addEventListener("mouseout", function (e) {
                that.$emit("mouserout_map");
            });
        },
        // 4.涟漪动画
        addEffect() {
            let that = this;
            this.map
                .getOverlays()
                .filter((lay) => lay.type === 1001)
                .forEach((item) => this.map.removeOverLay(item));

            const effect_info = this.effect_list;
            for (let i = 0; i < effect_info.length; i++) {
                const point = new T.LngLat(
                    effect_info[i].lng,
                    effect_info[i].lat
                );
                var label = new T.Label({
                    text: ` <div id="effect_key_${i}" class="effect_point"></div> `,
                    position: point,
                    offset: new T.Point(0, 0),
                });
                label.type = 1001;
                this.map.addOverLay(label);
                // this.addClickHandler(effect_info[i], label, i)   // 点击事件

                let ele = document.querySelector("#effect_key_" + i);
                createdDom(this.effect_property, ele);
            }

            function createdDom(property, ele) {
                // 使用js标签,便于操作,这个temDivEle的作用是将divEle通过innerHTML的方式获取为字符串
                var tempDivEle = document.createElement("div");
                var divEle = document.createElement("div");
                var spanEl = document.createElement("span");
                var aEl = document.createElement("a");
                ele.append(tempDivEle);
                tempDivEle.append(divEle);
                divEle.append(spanEl);
                spanEl.append(aEl);
                // 设置上基础中心点的样式
                spanEl.classList.add("pulse-icon");
                aEl.classList.add("dive-icon");
                // 操作样式
                var style = document.createElement("style");
                style.type = "text/css";
                document.head.appendChild(style);
                // sheet = style.sheet;
                // 主体颜色
                if (property) {
                    if (property.color) {
                        spanEl.style.backgroundColor = property.color;
                        if (!property.diveColor) {
                            aEl.style.boxShadow =
                                "0 0 6px 2px " + property.color;
                        }
                    }
                    // 中心点大小
                    if (property.iconSize) {
                        spanEl.style.width = that.styleUtil.px2vw(
                            property.iconSize[0]
                        );
                        spanEl.style.height = that.styleUtil.px2vw(
                            property.iconSize[1]
                        );
                    }
                    // 发散的color
                    if (property.diveColor) {
                        // 发散的重度
                        if (property.level) {
                            aEl.style.boxShadow =
                                "0 0 " +
                                property.level * 3 +
                                "px " +
                                property.level +
                                "px " +
                                property.diveColor;
                        } else {
                            aEl.style.boxShadow =
                                "0 0 6px 2px " + property.diveColor;
                        }
                    }
                    // 发散的重度
                    if (property.level) {
                        if (property.diveColor) {
                            aEl.style.boxShadow =
                                "0 0 " +
                                property.level * 3 +
                                "px " +
                                property.level +
                                "px " +
                                property.diveColor;
                        } else if (property.color) {
                            aEl.style.boxShadow =
                                "0 0 " +
                                property.level * 3 +
                                "px " +
                                property.level +
                                "px " +
                                property.color;
                        } else {
                            aEl.style.boxShadow =
                                "0 0 " +
                                property.level * 3 +
                                "px " +
                                property.level +
                                "px red";
                        }
                    }

                    // 闪烁的速度
                    if (property.speedTime) {
                        aEl.style.setProperty(
                            "animation",
                            "pulsate " + property.speedTime + "s infinite"
                        );
                    }
                }
            }
        },
        // 5.添加标记点
        addMarkers() {
            this.map
                .getOverlays()
                .filter((lay) => lay.type === 1000 || lay.type === 1001)
                .forEach((item) => this.map.removeOverLay(item));

            const marker_info = this.MarkerData;
            // const pointArray = [];
            for (let i = 0; i < marker_info.length; i++) {
                //创建图片对象
                const icon = new T.Icon({
                    iconUrl:
                        "static/images/grade/" + marker_info[i].grade + ".png",
                    iconSize: new T.Point(24, 32),
                    // iconAnchor: new T.Point(10, 25)
                });
                // 创建点
                const marker = new T.Marker(
                    new T.LngLat(marker_info[i].lng, marker_info[i].lat),
                    {
                        icon: icon,
                        title: marker_info[i].title || "",
                        zIndexOffset: 1000,
                    }
                );
                if (marker_info[i].title) {
                    const label = new T.Label({
                        text: marker_info[i].title,
                        position: new T.LngLat(
                            marker_info[i].lng,
                            marker_info[i].lat
                        ),
                        // offset: new T.Point(-40, 20),
                    });
                    label.type = 1001;
                    this.map.addOverLay(label);
                }
                // 标志
                marker.type = 1000;
                marker.overlay_type = "marker";
                marker.data = marker_info[i];
                //增加点
                this.map.addOverLay(marker);
                // pointArray[i] = new T.LngLat(marker_info[i].lng, marker_info[i].lat);
                // marker.addEventListener("click", this.MarkerClick);
                this.addClickHandler(marker_info[i], marker);
            }
            //让所有点在视野范围内
            //   map.setViewport(pointArray);
            // let p = document.querySelector(".tdt-iconLayers-layersRow");
            // if (p) {
            //   p.querySelectorAll(".tdt-iconLayers-layerCell").forEach((el) => {
            //     let c = el.querySelector(".tdt-iconLayers-layerTitle");
            //     this.layerCell[c.textContent.trim()] = el;
            //   });
            // }
        },
        // 6.标记点添加点击事件
        addClickHandler(data_item, marker, index) {
            let that = this;
            marker.addEventListener("click", function (e) {
                if (that.is_obj) {
                    that.$emit("onIcon", data_item);
                } else {
                    that.$emit("onIcon", data_item.id);
                }
                // let target = e.target
                // setTimeout(() => {
                //     that.openInfo(target.data, e);
                // }, 100);
            });
        },
        //父组件触发该方法 打开信息窗口
        emitInfoWindow(param) {
            const over = this.map
                .getOverlays()
                .filter(
                    (lay) =>
                        lay.data_id === param.id && lay.overlay_type == "marker"
                );
            const markerInfoWin = new T.InfoWindow(param, {
                offset: new T.Point(0, -30),
            }); // 创建信息窗口对象
            let item_temp = "";
            if (param.introduction?.length > 0) {
                // console.log("地图气泡");
                param.introduction.forEach((item) => {
                    item_temp = `
                        <div class="item"> <span class="label_text">${
                            item.label
                        }</span>: ${item.value || ""}
                            <div class="action iconfont icon-weibiaoti-" ></div>
                        </div>
                    `;
                });
            }
            let html = `
                <div class="big-map-mark">
                    ${item_temp}
                </div>
            `;

            markerInfoWin.setContent(html);
            over.openInfoWindow(markerInfoWin); //开启信息窗口
        },
        // 7.打开汽包 信息卡片
        openInfo(data_item, e, name) {
            let that = this;
            //打开信息窗口
            const point = e.lnglat;
            const markerInfoWin = new T.InfoWindow(data_item, {
                offset: new T.Point(0, -30),
            }); // 创建信息窗口对象
            let item_temp = "";
            // console.log(data_item);
            if (data_item.introduction?.length > 0) {
                // console.log("地图气泡");
                data_item.introduction.forEach((item) => {
                    if (item.is_tel) {
                        item_temp =
                            item_temp +
                            `
                            <div class="item"> <span class="label_text">${
                                item.label
                            }</span>: ${item.value || ""}
                                <div class="action iconfont icon-weibiaoti-" ></div>
                            </div>
                        `;
                    } else if (item.is_detail && item.is_video) {
                        item_temp =
                            item_temp +
                            `
                            <div class="item">
                                <div class="action detail iconfont icon-chakan2"> ${
                                    item.label || "查看详情"
                                }</div>
                                <div class="action iconfont icon-24gf-playCircle"> 播放</div>
                            </div>
                        `;
                    } else if (item.is_detail && !item.is_video) {
                        item_temp =
                            item_temp +
                            `
                            <div class="item">
                                <div class="action detail iconfont icon-chakan2"> ${
                                    item.label || "查看详情"
                                }</div>
                            </div>
                        `;
                    } else {
                        item_temp =
                            item_temp +
                            `<div class="item"> <span class="label_text">${
                                item.label
                            }</span>: ${item.value || ""} </div>`;
                    }
                });
            }

            let html = `
                <div class="big-map-mark">
                    ${item_temp}
                </div>
            `;

            markerInfoWin.setContent(html);
            that.map.openInfoWindow(markerInfoWin, point); //开启信息窗口
            // 监控信息窗口关闭事件
            markerInfoWin.addEventListener("close", function (e) {
                that.$emit("closeInfoWin", data_item.id);
            });

            setTimeout(() => {
                if (this.has_detail) {
                    let dom = document.querySelector(".detail");
                    // dom.onclick = function () {
                    //     that.$emit('detail', data_item.id)
                    // }
                    dom.addEventListener("click", () => {
                        that.$emit("detail", data_item.id);
                    });
                }
            }, 500);
        },
        // 8.关闭信息窗口
        handleClose() {
            this.map.closeInfoWindow();
        },
        // 9.自定义覆盖层
        AddOverLayFn() {
            this.map
                .getOverlays()
                .filter((lay) => lay.type === 1000)
                .forEach((item) => this.map.removeOverLay(item));

            const marker_info = this.MarkerData;
            for (let i = 0; i < marker_info.length; i++) {
                const point = new T.LngLat(
                    marker_info[i].lng,
                    marker_info[i].lat
                );
                var label = new T.Label({
                    text: `
                    <div id="icons${i}" class="icons" style="background: url('/static/images/grade/${marker_info[i].grade}.png') no-repeat;">
                        <span>${marker_info[i].icon_count}</span>
                    </div>
                    `,
                    position: point,
                    offset: new T.Point(0, 0),
                });
                label.type = 1000;
                this.map.addOverLay(label);
                this.addClickHandler(marker_info[i], label, i);
            }
        },
        // 添加覆盖物
        addOverlays() {
            let that = this;
            this.overlays.forEach((item) => {
                item.removeEventListener("click", this.tapPolygon);
                this.map.removeOverLay(item);
            });
            this.overlays = [];
            // layData 数据结构 {
            //     polygons //经纬度数组
            //     color
            //     weight
            //     opacity
            //     fillColor
            //     fillOpacity
            //     name
            //     id
            // }}
            this.overlayData.forEach((layData) => {
                const polygon = new T.Polygon(layData.polygons, {
                    color: layData.color || this.stroke,
                    weight: layData.weight || this.strokeWidth,
                    opacity: layData.opacity || this.strokeOpacity,
                    fillColor: layData.fillColor || this.fillColor,
                    fillOpacity: layData.fillOpacity || this.fillOpacity,
                });
                polygon.data = layData; // 绑定数据到对象上
                polygon.overlay_type = "polygon";
                this.map.addOverLay(polygon);
                this.overlays.push(polygon); // 添加已绑定到地图的覆盖物
                polygon.addEventListener("mouseover", (e) => {
                    // alert("进入"+e.lnglat.getLng() + "," + e.lnglat.getLat());
                    // console.log(e)
                    // e.target.setColor("red")
                    that.setPolygonStyle(e.target, {
                        color: "#2DCDFF",
                        weight: 1,
                        opacity: 0.5,
                        fillColor: "#2DCDFF",
                        fillOpacity: 0.5,
                    });
                    // 设置矩形边缘线
                    polygon.setLineStyle("solid");
                    // 设置矩形透明度
                    polygon.setFillOpacity(0.7);
                    // 矩形文本标注内容
                    var text = `<div style='font-size:bold;'> 编码：${polygon.data.id}<br>名称：${polygon.data.name}</div>`;
                    // 矩形覆盖物文本标注坐标
                    var position = new window.T.LngLat(
                        polygon.getLngLats()[0][1].lng,
                        polygon.getLngLats()[0][1].lat
                    );
                    // 文本标注
                    this.label = new window.T.Label({
                        text: text,
                        position: position,
                    });
                    this.label.overlay_type = "label";
                    // 设置文本标注边框线宽度
                    this.label.setBorderLine(2);
                    // 设置文本大小
                    this.label.setFontSize(this.map.getZoom() - 1);
                    // 添加到地图
                    this.map.addOverLay(this.label);
                });
                polygon.addEventListener("mouseout", (e) => {
                    // alert("离开" + e.lnglat.getLng() + "," + e.lnglat.getLat());
                    // console.log(e)
                    // e.target.setColor("red")
                    that.setPolygonStyle(e.target, {
                        color: e.target.data.color || "blue",
                        weight: e.target.data.weight || 1,
                        opacity: e.target.data.opacity || 0.5,
                        fillColor: e.target.data.fillColor || "#FFFFFF",
                        fillOpacity: e.target.data.fillOpacity || 0.1,
                    });
                    polygon.setLineStyle("dashed");
                    polygon.setFillOpacity(0.1);
                    // 鼠标移出矩形覆盖物时关闭文本窗口
                    this.map.removeOverLay(this.label);
                });
                polygon.addEventListener("click", this.tapPolygon);
            });
            // this.addCenterCircle(); // 测试用，添加中心点
        },
        tapPolygon(e) {
            let that = this;
            // console.log(e)
            this.ativePolygon = e.target;
            this.ativePolygon && this.ativePolygon.setColor("yello");
            // e.target.setColor("red")
            that.setPolygonStyle(e.target, {
                color: "red",
                weight: 1,
                opacity: 0.5,
                fillColor: "#FFFFFF",
                fillOpacity: 0.5,
            });
            var p = e.target;
            if (p instanceof T.Marker) {
                // alert("该覆盖物是点，点的坐标是：" + p.getLngLat().lng + "," + p.getLngLat().lat);
            } else if (p instanceof T.Circle) {
                // alert("该覆盖物是圆，圆的半径是：" + p.getRadius() + "，圆的中心点坐标是：" + p.getCenter().lng + "," + p.getCenter().lat);
            } else if (p instanceof T.Polyline) {
                // alert("该覆盖物是折线，所画点的个数是：" + p.getLngLats().length);
            } else {
                // alert("无法获知该覆盖物类型");
            }
            // alert(e.lnglat.getLng() + "," + e.lnglat.getLat());
            this.$emit("tapOverlay", e);
            // console.log(this.map.getOverlays())
        },
        setPolygonStyle(
            target,
            style = {
                color: "blue",
                weight: 1,
                opacity: 0.5,
                fillColor: "#FFFFFF",
                fillOpacity: 0.5,
            }
        ) {
            target.setColor(style.color);
            target.setWeight(style.weight);
            target.setOpacity(style.opacity);
            target.setFillColor(style.fillColor);
            target.setFillOpacity(style.fillOpacity);
        },
    },
};
</script>

<style>
.tdt-label {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    width: 26px !important;
    height: 32px !important;
    z-index: 500 !important;
    font-size: 14px !important;
    padding: 0 !important;
    line-height: 22px !important;
    box-shadow: none;
    text-align: center;
    cursor: pointer;
}
.tdt-label .icons {
    width: 26px !important;
    height: 32px !important;
    z-index: 500 !important;
    font-size: 14px !important;
    padding: 0 !important;
    line-height: 22px !important;
}
.pulse-icon {
    display: inline-block;
    border-radius: 100%;
    /* background-color: red; */
    width: vw(15);
    height: vw(15);
    position: relative;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
}

.dive-icon {
    content: "";
    box-shadow: 0 0 6px 2px red;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    animation-delay: 1.1s;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    height: 200%;
    width: 200%;
    animation: pulsate 2s infinite;
    position: absolute;
    margin: -50% 0 0 -100%;
}

@keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}
</style>

<style scoped lang="scss">
.tmap-container {
    height: 100%;
    width: 100%;
}

#mapDiv {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.tdt-marker-icon {
    width: 19px !important;
    height: 27px !important;
}
</style>
